<template>
	<view>
		<map style="height: 500rpx;width: 100%; border: 1px  solid red;"
			:latitude="latitude" :longitude="longitude" scale="14"
			:markers="markers"
			@markertap="showMarker"
		/>
		
		<button @tap="showInfo">选择位置</button>
		<button @tap="showMap">显示地图展示指定位置</button>
		<button @tap="nearby_search">附近的加油站</button>
	</view>
</template>

<script>
	// 引入SDK核心类，js文件根据自己业务，位置可自行放置
	var QQMapWX = require('../../static/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	
	export default {
		data() {
			return {
				latitude:"",
				longitude:"",
				markers:[]
			}
		},
		onLoad: function () {
		        // 实例化API核心类
		        qqmapsdk = new QQMapWX({
		            key: 'MAKBZ-B6SKV-HEVPC-53CRU-2AIGS-DDBSI'
		        });
		},
		onReady() {
			this.getMyPosition()
		},
		methods: {
			getMyPosition(){
				const  that=this;
				uni.getLocation({
					success(resp) {
						console.log(resp);
						that.latitude=resp.latitude;
						that.longitude=resp.longitude;   
					}
				})
			},
			showInfo(){
				console.log("选择位置");
				uni.chooseLocation({
					success(resp) {
						console.log(resp);
					}
				})
			},
			showMap(){
				uni.openLocation({
					latitude:34.86739,
					longitude:113.61694
				})
			},
			showMarker(res){
				console.log(res);
				console.log("marker");
			},
			//附近的加油站
			nearby_search(){
			   var _this = this;
			   // 调用接口
			   qqmapsdk.search({
			      keyword: '加油站',  //搜索关键词
			      location: {//设置周边搜索中心点
					  latitude:_this.latitude,
					  longitude:_this.longitude
				  },  
			      success: function (res) { //搜索成功后的回调
			        var mks = []
			        for (var i = 0; i < res.data.length; i++) {
			          mks.push({ // 获取返回结果，放到mks数组中
			            title: res.data[i].title,
			            id: res.data[i].id,
			            latitude: res.data[i].location.lat,
			            longitude: res.data[i].location.lng,
			            //iconPath: "/resources/my_marker.png", //图标路径
			            width: 10,
			            height: 20
			          })
			        }
					//设置markers属性，将搜索结果显示在地图中
			        _this.markers=mks;
			      },
			      fail: function (res) {
			        console.log(res);
			      },
			      complete: function (res){
			        console.log(res);
			      }
			  });
			}
		}
	}
</script>

<style>

</style>
